<template>
    <view class="topic">
        <view class="header flex row-between">
            <view class="normal lg bold"># {{ topicName }}</view>
            <view class="flex">
                <image src="/bundle_b/static/icon_see.png"></image>
                <text class="lighter sm m-l-10">{{ click }}</text>
            </view>
        </view>

        <!-- Menu -->
        <view class="menu flex">
            <view class="menu--item" :class="{'active': sortHot}" @click="handleSortHot">最热</view>
            <view class="menu--item" :class="{'active': sortNew}" @click="handleSortNew">最新</view>
        </view>

        <view>
            <mescroll-body ref="mescrollRef" top="0" @init="mescrollInit" @down="downCallback" @up="upCallback"
                :down="downOption" :up="upOption">

                <u-waterfall ref="uWaterfall" v-model="lists" :add-time="20">
                    <template v-slot:left="{leftList}">
                        <view style="padding:0 9rpx 0 30rpx">
                            <community-list width="336rpx" type="waterfall" :list="leftList"></community-list>
                        </view>
                    </template>
                    <template v-slot:right="{rightList}">
                        <view style="padding:0 30rpx 0 9rpx;">
                            <community-list width="336rpx" type="waterfall" :list="rightList"></community-list>
                        </view>
                    </template>
                </u-waterfall>

            </mescroll-body>
        </view>
    </view>
</template>

<script>
    import {
        getCommunityTopicArticle
    } from "@/api/community.js"
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
    import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
    export default {
        mixins: [MescrollMixin, MescrollMoreItemMixin],
        data() {
            return {
                topicId: '',
                topicName: '',
                sortHot: true,
                sortNew: false,
                lists: [],
                click: 0, //查看｜点击数
                upOption: {
                    empty: {
                        icon: '/static/images/index_shop_bg.png',
                        tip: '暂无商品 ', // 提示
                        fixed: true,
                        top: "200rpx",
                    }
                },
            }
        },
        onLoad() {
            const options = this.$Route.query;
            this.topicId = options.id || '';
            this.topicName = options.name || '';
        },
        onShow() {
            this.$nextTick(() => {
                this.downCallback({
                    num: 1,
                    size: 10
                })
            })
        },
        onPageScroll(e) {
            const {
                scrollTop
            } = e
            if (scrollTop <= 60) {
                this.mescroll.lockDownScroll(false)
            } else if (scrollTop <= 400) {
                this.mescroll.lockDownScroll(true)
            }
        },
        methods: {
            initMescroll(event) {
                
                this.mescroll = event;
            },
            handleSortHot() {
                this.sortHot = !this.sortHot
                this.mescroll.resetUpScroll()
            },
            handleSortNew() {
                this.sortNew = !this.sortNew
                this.mescroll.resetUpScroll()
            },
            // 获取
            async downCallback(page) {
                const pageNum = page.num
                const pageSize = page.size

                getCommunityTopicArticle({
                    topic_id: 1,
                    sort_hot: this.sortHot ? 'desc' : 'asc',
                    sort_new: this.sortNew ? 'desc' : 'asc',
                    page_no: pageNum,
                    page_size: pageSize,
                }).then(res => {
                    // 如果是第一页需手动置空列表
                    if (pageNum == 1 || this.keyword) this.lists = []
                    // 重置列表数据
                    const hasNext = !!res.data.lists.more;
                    this.click = res.data.click
                    this.lists = [...this.lists, ...res.data.lists.list]
                    this.mescroll.endSuccess(res.data.lists.list.length, hasNext);
                }).catch((err) => {
                    this.mescroll.endErr()
                })
            },
        }
    }
</script>

<style lang="scss">
    page {
        background-color: #FFFFFF;
    }

    .topic {
        .header {
            padding: 40rpx 40rpx 30rpx 30rpx;
            border-top: 1px solid $-color-body;
            border-bottom: 1px solid $-color-body;

            image {
                width: 42rpx;
                height: 42rpx;
            }
        }

        .menu {
            padding: 0 30rpx;

            &--item {
                margin: 20rpx 0;
                font-size: 28rpx;
                color: $-color-muted;
                margin-right: 50rpx;
            }

            .active {
                color: $-color-primary;
                font-weight: 500;
            }
        }
    }
</style>
